<template>
    <el-dialog title="授权小程序" v-model="drawer" width="432px" center draggable :append-to-body="true" :destroy-on-close="true"
        @close="close">
        <div class="qrcode-body">
            <div style="display: flex; justify-content: center;">
                <qrcode-vue class="qrCode" :value="authCodeUrl" :size="size" errorLevel="H"></qrcode-vue>
            </div>
            <div class="info-text">
                请使用小程序管理员个人微信号扫描
            </div>
        </div>
        <div class="bottom-box">
            <div style="text-align: center;">
                注：为了保证功能完整性，请确认授权全部权限。
                <span style="text-decoration: none;color: rgb(54, 108, 179);cursor: pointer;">如何确认?</span>
            </div>
        </div>
    </el-dialog>
</template>

<script>
import { computed, reactive, toRefs, ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import QrcodeVue from 'qrcode.vue'
import api from '/@/api/commonApi'


export default {
    name: 'AuthQRCode',
    components: {
        QrcodeVue
    },
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        },
        authUrl: {
            type: String,
            default: ''
        }
    },
    emits: ['onSubmit', 'update:dialogDrawer'],
    setup(props, context) {
        const { dialogDrawer, authUrl } = toRefs(props)
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        const state = reactive({
            authCodeUrl: authUrl.value, // 授权二维码路径
            size: 200,
        })

        // 获取授权二维码
        const getAuthQrCodeUrl = () => {
            api.appAuthCodeUrl({ type: 0 }).then(res => {
                // 获取二维码链接
                state.authCodeUrl = res.data
            })
        }
        // 取消
        const close = () => {
            context.emit('update:dialogDrawer', false)
        }
        // 获取授权状态
        const getTaskStats = () => {
            setInterval(() => {
                api.getTaskStatus().then(res => {
                    if(res.data == 1) {
                        context.emit('onSubmit', true)
                        context.emit('update:dialogDrawer', false)
                    }
                })
            }, 2000);
        }

        onMounted(() => {
            getTaskStats()
        })
        return {
            drawer,
            close,
            getAuthQrCodeUrl,
            ...toRefs(state)
        }
    }
}


</script>

<style lang="scss" scoped>
.qrcode-body {
    width: 268px;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgb(238, 238, 238);
    margin: 0px auto 30px;
    border-radius: 4px;

    .info-text {
        color: rgb(153, 153, 153);
        margin-top: 24px;
        text-align: center;
        opacity: 1;
    }


}

.bottom-box {
    height: 57px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(249, 249, 249);
    border-radius: 0px 0px 4px 4px;
}
</style>